<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>志愿者服务活动中心多媒体展示管理系统</title>
    <style>
        ul{
            background: #0056b3;
            list-style-type: none; /*清除无序列表前的小点*/
            width: auto;
            height: 50px;
            text-align: center;
        }
        li{
            list-style-type: none;
            float: left;
            width: 130px;
            height: 100%;
            padding-left:15%;
            margin-right: 7%;  /*两个li之间的距离*/
        }
        a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
            color: #FFFFFF;
            background-color: #0056b3;
            text-align: center;
            line-height: 50px; /*li行高*/
            padding: 10px;
            text-decoration: none; /*去下划线*/
        }
        a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
            color: #000; /* 鼠标悬停时文字颜色变为黑色 */
            border: 1px solid #409eff;
            /* color: #fff; */
            background: hsla(0,0%,97.3%,0.3);
            -webkit-transition: all .5s;
            transition: all .5s;
        }

        .modal{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal .container{
            width: 650px;
            height: 512px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            box-sizing: border-box;
            border-radius: 6px;
            padding: 1em;
        }
        .modal .container .close{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            right: -10px;
            top: -10px;
            border: 2px solid #fff;
            cursor: pointer;
            background-color: deepskyblue;
            text-align: center;
            line-height: 30px;
        }
        .modal .container td{
            height: 35px;
            border: 1px solid #ccc;
        }

        .modal .container tr:nth-child(even){
            background-color: #f9f9f9;
        }

        .modal .container td:first-child {
            font-weight: bold;
        }

        .modal .container input[type="text"]{
            padding: 10px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: 2px solid #ccc; /* 边框 */
            font-size: 16px; /* 字体大小 */
            width: 400px; /* 设置文本输入框宽度 */
            margin-right: 5px; /* 设置右边距 */
            margin-bottom: 5px;
        }

        .modal .container table{
            margin-top: 20px;
            height: 450px;
            width: 615px;
        }

        .modal .container button{
            /* 设置按钮的宽度和高度 */
            width: 150px;
            height: 50px;

            /* 设置按钮的背景颜色 */
            background-color: steelblue;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;

            /* 添加过渡效果，使按钮的颜色在鼠标悬停时变化 */
            transition-duration: 0.4s;
        }

        .modal .container button:hover{
            background-color: white;
            color: black;
            border: 2px solid steelblue;
        }

        .wmsxTables button {
            color: #FFFFFF;
            background-color: #0056b3;
            text-align: center;
            font-size: 15px;
            width: 52px;
            height: 38px;
            font-family: Arial, sans-serif;
            border:none;
            text-decoration: none;
            cursor: pointer;
        }

        .wmsxTables button:hover {
            color: #000;
            border: 1px solid #409eff;
            background: hsla(0, 0%, 97.3%, 0.3);
            -webkit-transition: all .5s;
            transition: all .5s;
        }



        .wmsxTables table {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        .wmsxTables table, tbody, td {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .wmsxTables th, td {
            border: 1px solid #dddddd;
            padding: 8px;
            text-align: center;
        }

        .wmsxTables th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .wmsxTables tr:nth-child(even) {
            background-color: #f9f9f9;
        }


        form {
            text-align: center; /* 居中 */
        }

        .form input[type="text"] {
            padding: 10px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: 2px solid #ccc; /* 边框 */
            font-size: 16px; /* 字体大小 */
            width: 300px; /* 设置文本输入框宽度 */
            margin-right: 20px; /* 设置右边距 */
            margin-bottom: 25px;
        }

        .form button {
            padding: 10px 20px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: none; /* 移除默认边框 */
            background: linear-gradient(to left, #64B5F6, #BBDEFB); /* 天蓝色渐变背景色 */
            color: black; /* 文本颜色 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s; /* 过渡效果 */
            margin-bottom: 25px;
        }

        .form button:hover {
            background: linear-gradient(to right, #64B5F6, #BBDEFB); /* 鼠标悬停时的渐变背景色 */
        }

        .form input[type="button"] {
            height: 41px;
            width: 75px;
            padding: 5px 10px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: none; /* 移除默认边框 */
            background: linear-gradient(to right, #2196F3, #9C27B0); /* 从蓝色渐变到紫色 */
            color: #FFD700; /* 文本颜色更改为金色 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s; /* 过渡效果 */
            margin-top: 5px;
            margin-left: 20px;
        }

        .form input[type="button"]:hover{
            background: linear-gradient(to left, #2196F3, #9C27B0); /* 鼠标悬停时的渐变背景色 */
        }

        img {
            width: 100%; /* 图片宽度填满单元格 */
            height: auto; /* 高度自适应，保持比例 */
            display: block; /* 图片在单元格内居中显示 */
            margin: 0 auto; /* 图片居中对齐 */
        }

        .null{
            color: black;
            text-align: center;
            margin-top: 5px;
            font-size: 25px;
        }
    </style>

    <script>
        function edit(id, title, photo, link){
            let modal = document.querySelector(".modal");
            modal.style.display="inherit";

            document.getElementById("wmsx_id").innerText = id;
            document.getElementById("title_new").value = title;
            document.getElementById("photo_new").value = photo;
            document.getElementById("link_new").value = link;
        }

        function hideModal(){
            let modal = document.querySelector(".modal");
            modal.style.display="none";
        }

        window.onload = function() {
            let closeButton = document.querySelector(".modal .close");
            closeButton.addEventListener("click", hideModal);
        };

        function redirectToShow(){
            let title = document.getElementById("title");
            if(title.value === ""){
                confirm("请输入查找内容");
                return false;
            }else {
                document.getElementById("select").action = "/content/select_administrator";
                document.getElementById("select").submit();
            }
        }

        function update(){
            let wmsx_id = document.getElementById("wmsx_id");
            let wmsx_id_new = document.getElementById("wmsx_id_new");
            wmsx_id_new.value = Number(wmsx_id.innerText);

            let title_new = document.getElementById("title_new");
            let link_new = document.getElementById("link_new");
            let photoFile = document.getElementById("photoFile");
            if(title_new.value !== ""){
                if(link_new.value !== ""){
                    if(photoFile.files.length === 0){
                        photoFile.name = "";
                        document.getElementById("update").submit();
                    }else {
                        document.getElementById("update").submit();
                    }
                } else {
                    confirm("标题不能为空！");
                    return false;
                }
            } else {
                confirm("链接不能为空！");
                return false;
            }
        }

        function add() {
            window.location.href = "/content/index_add";
        }
    </script>
</head>
<body>
<div class="modal" style="display: none;">
    <div class="container">
        <form id="update" action="/content/update_wmsx" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>
                        编号
                    </td>
                    <td id="wmsx_id"></td>
                    <input id="wmsx_id_new" name="wmsx_id_new" type="hidden">
                </tr>
                <tr>
                    <td>
                        标题
                    </td>
                    <td>
                        <input id="title_new" name="title_new" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        链接
                    </td>
                    <td>
                        <input id="link_new" name="link_new" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        图片
                    </td>
                    <td>
                        <input id="photoFile" name="photoFile" type="file"
                               onchange="document.getElementById('photo_new').value = document.getElementById('photoFile').files[0].name">
                        <input id="photo_new" name="photo_new" type="hidden">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button onclick="update()">提交</button>
                    </td>
                </tr>
            </table>
        </form>
        <div class="close">
            X
        </div>
    </div>
</div>

    <ul>
        <li><a href="/content/index_administrator"> 文明山西 </a></li>
        <li><a href="/content/LFRX_administrator"> 雷锋热线 </a></li>
        <li><a href="/administrator/exit"> 退出登录 </a></li>
    </ul>

    <div class="form">
        <form id="select" name="form-select" method="get" enctype="application/x-www-form-urlencoded" align="center">
            <input id="title" name="title" type="text" placeholder="请输入查询的名称">
            <button type="submit" th:onclick="redirectToShow()">查询</button>
            <input type="button" onclick="add()" value="新增">
        </form>
    </div>

    <div class="wmsxTables">
        <table>
            <thead>
            <th>编号</th>
            <th>标题</th>
            <th>图片</th>
            <th>链接</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr th:each="c:${contents}">
                <td th:text="${c.wmsx_id}"></td>
                <td th:text="${c.title}"></td>
                <td>
                    <img th:src="@{'/file/download?'(filename=${c.photo})}">
                </td>
                <td th:text="${c.link}"></td>
                <td>
                    <button th:onclick="edit([[${c.wmsx_id}]], [[${c.title}]], [[${c.photo}]], [[${c.link}]])">编辑</button>
                    <a th:href="@{'/content/delete_wmsx'(wmsx_id=${c.wmsx_id})}" onclick="return confirm('确认删除？');">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="nullMessage" class="null"></div>
    </div>
</body>
</html>